<template>
    <ul>
        <li :style="{opacity}">欢迎学习vue</li>
        <li>news001 <input type="text"></li>
        <li>news002 <input type="text"></li>
        <li>news003 <input type="text"></li>

    </ul>
</template>

<script>
    export default {
        name: "News",
        data() {
            return {
                opacity: 1
            }
        },
        // mounted() {
        //     this.timer=setTimeout(() => {
        //         console.log('@')
        //         this.opacity -= 0.01
        //         if (this.opacity <= 0) {
        //             this.opacity = 1
        //         }
        //     }, 16)
        // },
        // beforeDestroy() {
        //     clearInterval(this.timer)
        // }

        activated() {
            console.log('激活')
            this.timer = setInterval(() => {
                console.log('@')
                this.opacity -= 0.01
                if (this.opacity <= 0) {
                    this.opacity = 1
                }
            }, 16)
        },
        deactivated() {
            console.log('失活')
            clearInterval(this.timer)
        }

    }
</script>

<style scoped>

</style>
